<template>
  <div>
    <v-menu
      v-model="menu"
      ref="menu"
      :close-on-click="false"
      :close-on-content-click="false"
      transition="scale-transition"
      nudge-top="300"
      min-width="auto"
    >
      <template v-slot:activator="{ on }">
        <div class="d-flex align-center">
          <v-text-field
            class="pa-0 ma-0 range-picker"
            ref="textFieldInput"
            :value="dateTime"
            @focus="focusText"
            v-on="on"
            v-bind="$attrs"
          >
            <template #append>
              <v-icon class="date-icon">mdi-calendar-month</v-icon>
              <v-icon class="date-icon">mdi-clock-time-four</v-icon>
            </template>
          </v-text-field>
        </div>
      </template>
      <v-date-picker
        v-if="showDatePicker"
        :max="maxDate"
        :min="minDate"
        :value="date === '' ? propDefaultDatePage : date"
        @input="inputDate"
        :show-current="false"
        no-title
        scrollable
      >
        <v-spacer></v-spacer>
        <v-btn text color="primary" @click="cancelDate"> Cancel </v-btn>
        <v-btn text color="primary" :disabled="date === ''" @click="submitDate">
          OK
        </v-btn>
      </v-date-picker>
      <v-time-picker
        v-else
        :max="maxTime"
        :min="minTime"
        :value="time"
        @input="inputTime"
        format="24hr"
        scrollable
      >
        <v-spacer></v-spacer>
        <v-btn text color="primary" @click="cancelTime"> Cancel </v-btn>
        <v-btn text color="primary" :disabled="time === ''" @click="submitTime">
          OK
        </v-btn>
      </v-time-picker>
    </v-menu>
  </div>
</template>

<script lang="ts">
import { Component, Vue, ModelSync } from "vue-property-decorator";
import { validateDate, validateTime } from "@/common/constants/Utils";
import VTextField from "vuetify/src/components/VTextField";
type VTextFieldInstance = InstanceType<typeof VTextField>;
@Component({
  components: {},
  props: {
    max: {
      type: String,
    },
    min: {
      type: String,
    },
    defaultDatePage: {
      type: String,
      default: "",
    },
  },
})
export default class RangePicker extends Vue {
  @ModelSync("value", "input", { type: String, default: "" })
  rangeValue!: string;
  date = "";
  time = "";
  menu = false;
  dateFormatted = "";
  showDatePicker = true;

  get dateTime() {
    if (this.date === "" && this.time === "") {
      return "";
    }
    return `${this.date} ${this.time}`;
  }

  get propDefaultDatePage() {
    return this.$props.defaultDatePage;
  }

  // 初始化时间
  initData() {
    const splitRangeValue = this.rangeValue.split(" ");
    if (this.rangeValue === "") {
      this.date = "";
      this.time = "";
      return;
    }
    if (splitRangeValue.length === 1) {
      // 传入的是日期则初始化日期的值，清空时间
      if (validateDate(splitRangeValue[0])) {
        this.date = splitRangeValue[0];
        this.time = "";
      }
      // 传入的是时间则初始化时间的值, 清空日期
      if (validateTime(splitRangeValue[0])) {
        this.date = "";
        this.time = splitRangeValue[0];
      }
      return;
    }
    const [date, time] = splitRangeValue;
    this.date = date;
    this.time = time;
  }

  focusText() {
    this.showDatePicker = true;
    this.$nextTick(() => {
      (this.$refs.textFieldInput as VTextFieldInstance).blur();
    });
  }

  closeMenu() {
    this.menu = false;
  }

  // Date
  get maxDate() {
    if (!this.$props.max) {
      return "";
    }
    const date = this.$props.max.split(" ")[0];
    if (validateDate(date)) {
      return date;
    } else {
      return "";
    }
  }
  get minDate() {
    if (!this.$props.min) {
      return "";
    }
    const date = this.$props.min.split(" ")[0];
    if (validateDate(date)) {
      return date;
    } else {
      return "";
    }
  }
  submitDate() {
    this.showDatePicker = false;
  }
  cancelDate() {
    this.closeMenu();
    this.initData();
  }
  inputDate(value: string) {
    this.date = value;
  }
  // Time
  get maxTime() {
    if (!this.$props.max) {
      return "";
    }
    // 还没到最大日期的时候时间不限制，只有到达最大日期才需要限制
    if (this.date !== this.maxDate) {
      return "";
    }
    const time = this.$props.max.split(" ")[1];
    if (validateTime(time)) {
      return time;
    } else {
      return "";
    }
  }
  get minTime() {
    if (!this.$props.min) {
      return "";
    }
    // 还没到最小日期的时候时间不限制，只有到达最小日期才需要限制
    if (this.date !== this.minDate) {
      return "";
    }
    const time = this.$props.min.split(" ")[1];
    if (validateTime(time)) {
      return time;
    } else {
      return "";
    }
  }
  submitTime() {
    this.showDatePicker = false;
    this.closeMenu();
    this.rangeValue = this.dateTime;
  }
  inputTime(value: string) {
    this.time = value;
  }
  cancelTime() {
    this.time = "";
    this.showDatePicker = true;
  }

  mounted() {
    this.initData();
  }
}
</script>

<style lang="scss" scoped>
@import "./RangePicker.scss";
</style>
